<template>
  <div>
    <div class="header">
      <img mode="widthFix" :src="detail.app_list_pic_url">
      <div class="text">
        <h1>{{detail.name}}</h1>
        <p :key="i" v-for="(text,i) in detail.simple_desc">{{text}}</p>
      </div>
    </div>
    <v-split></v-split>
    <div class="goodsList">
      <v-goods :key="index" v-for="(goods, index) in goodsList" :goods="goods"></v-goods>
    </div>
    <v-more :isMore="isMore"></v-more>
  </div>
</template>

<script>
import {get} from '@/utils'
import vSplit from '@/components/split'
import vGoods from '@/components/goods'
import vMore from '@/components/more'

export default {
  data () {
    return {
      detail: {},
      goodsList: [],
      page: 0,
      pageSize: 10,
      isMore: false
    }
  },
  mounted () {
    this.init()
    this.getDetail()
  },
  methods: {
    async getDetail () {
      const {id} = this.$root.$mp.query
      const res = await get('/weapp/brand/brandDetail', {id})
      this.detail = res.detail
      this.detail.simple_desc = this.detail.simple_desc.split('，')
      this.getGoods()
    },
    async getGoods () {
      const res = await get('/weapp/brand/goodsList', {
        brandId: this.detail.id,
        page: this.page,
        pageSize: this.pageSize
      })
      if (res.goodsList.length < 10) {
        this.isMore = true
      }
      this.goodsList = this.goodsList.concat(res.goodsList)
      wx.hideLoading()
    },
    init () {
      this.goodsList = []
      this.isMore = false
      this.page = 0
    }
  },
  components: {
    vSplit,
    vGoods,
    vMore
  },
  onReachBottom () {
    if (this.isMore) return
    this.page = this.page + 1
    wx.showLoading({
      title: '加载中'
    })
    this.getGoods()
  }
}
</script>

<style lang="less" scoped>
.header{
  background: #fff;
  img{
    width: 100%;
  }
  .text{
    padding: 30rpx;
    h1{
      font-size: 36rpx;
      font-weight: bold;
      padding-bottom: 30rpx;
    }
    p{
      font-size: 28rpx;
      line-height: 40rpx;
      color: #666;
    }
  }
}

.goodsList{
  width: calc(100% - 10rpx);
  padding: 0 5rpx;
  background-color: #f3f5f7;
}
</style>
